| IE8中动态创建script标签onload无效的解决方法 | 您所在的位置：网站首页 › js script加载顺序 › IE8中动态创建script标签onload无效的解决方法 |
|
本文实例讲述了IE8中动态创建script标签onload无效的解决方法。分享给大家供大家参考。具体分析如下： 今天做项目，发现一个奇怪的问题，动态创建的script标签在IE8下无法触发onload事件。 代码如下： 复制代码 代码如下:var loadJs = function(src, fun){ var script = null; script = document.createElement("script"); script.type = "text/javascript"; script.src = src; if(typeof fun === "function"){ script.onload = fun; } document.getElementsByTagName("head")[0].appendChild(script); }; loadJs("js/jquery-1.11.0.min.js", function(){ console.log("From jQuery"); }); loadJs("test.js", function(){ console.log("From test.js"); }); test.js： console.log(typeof jQuery); 运行结果： 复制代码 代码如下:undefined // test.js运行时，jQuery还未加载 >> typeof jQuery // 从控制台上运行，却找到了jQuery对象，证明加载顺序问题 "function" 并且以上代码中script.onload并没有执行，明明代码已经加载进来了，为什么还是onload不执行呢？到网上一查发现众多前端开发人员都遇到这个棘手的问题，于是找到了一些替补方案，如下： 复制代码 代码如下:var loadJs = function(src, fun){ var script = null; script = document.createElement("script"); script.type = "text/javascript"; script.src = src; if(typeof fun === "function"){ script.onreadystatechange = function() { var r = script.readyState; console.log(src + ": " + r); if (r === 'loaded' || r === 'complete') { script.onreadystatechange = null; fun(); } }; } document.getElementsByTagName("head")[0].appendChild(script); }; 执行结果： 复制代码 代码如下:undefined js/jquery-1.11.0.min.js: loading test.js: complete From test.js js/jquery-1.11.0.min.js: loaded From jQuery 执行步骤为，这下类似于onload的功能算然算是找到了，但却有一个问题，它不是按顺序加载的，当jQuery文件loading的时候，test.js已经complete了，并且第一行就先执行了test.js的内容。因为test.js先于jQuery执行，所以才打出undefined。于是我们可以改写成这样，让它线性加载： 复制代码 代码如下:loadJs("js/jquery-1.11.0.min.js", function(){ console.log("From jQuery"); loadJs("test.js", function(){ console.log("From test.js"); }); }); 执行结果： 复制代码 代码如下:js/jquery-1.11.0.min.js: loading js/jquery-1.11.0.min.js: loaded From jQuery function test.js: complete From test.js 这次，执行的顺序完全是按照我们预订的顺序来了，但以上代码看着很别扭，需要层层嵌套，于是又发现了这种写法： 复制代码 代码如下:var loadJs = function(src, fun){ var script = null; script = document.createElement("script"); script.type = "text/javascript"; script.src = src; if(typeof fun === "function"){ script.onreadystatechange = function() { var r = script.readyState; console.log(src + ": " + r); if (r === 'loaded' || r === 'complete') { script.onreadystatechange = null; fun(); } }; } document.write(script.outerHTML); //document.getElementsByTagName("head")[0].appendChild(script); }; loadJs("js/jquery-1.11.0.min.js", function(){ console.log("From jQuery"); }); loadJs("test.js", function(){ console.log("From test.js"); }); 执行结果的顺序，也不相同： 复制代码 代码如下:function js/jquery-1.11.0.min.js: loaded From jQuery test.js: loaded From test.js 如果你改变一下加载顺序 复制代码 代码如下:loadJs("test.js", function(){ console.log("From test.js"); }); loadJs("js/jquery-1.11.0.min.js", function(){ console.log("From jQuery"); }); 执行结果也就不一样，类似顺序加载： 复制代码 代码如下:undefined test.js: loaded From test.js js/jquery-1.11.0.min.js: loaded From jQuery希望本文所述对大家的javascript程序设计有所帮助。 您可能感兴趣的文章:JavaScript动态添加css样式和script标签动态创建script标签实现跨域资源访问的方法介绍Script标签与访问HTML页面详解javascript标签在页面中的位置探讨script标签属性type与language使用选择script标签的 charset 属性使用说明javascript 获取url参数和script标签中获取url参数函数代码asp.net(C#) 动态添加非ASP的标准html控件（如添加Script标签）有趣的script标签用getAttribute方法来自脚本吧浅谈js script标签中的预解析 |
| CopyRight 2018-2019 实验室设备网 版权所有 |